import { Component, Fragment } from 'preact';
// import {style} from './index.scss';
import { Tab } from '../../components';
import Button from '../../components/Button';
import Icon from '../../components/Icon';
import List from '../../components/List'; 
import Alert from '../../components/Alert';
import Badge from '../../components/Badge';
import Card from '../../components/Card'; 
import ETimeline from './example/ETimeline';

const types = ['primary','secondary','info','success','warning','danger','light','dark','link'];

class Plugins extends Component {
	constructor(props) {
		super(props);
		this.state = {

		};
	}

	componentDidMount() {

	}

	render() {
		return (
			<div className="row" style={{marginTop:'6px'}}>
				<div className="col-lg-2">
					<List style={{ width: '100%',position: 'fixed', top: '62px' }}>
						<List.Item>
							<Button type="link" href="#icons" icon="eye">Icon 图标</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#timelime">Timelime</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#alert">Alert</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#badge">Badge</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#button">Button按钮</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#card">Card</Button>
						</List.Item>
						<List.Item>
							<Button type="link" href="#tabs">多Tab</Button>
						</List.Item>
					</List>
				</div>
				<div className="col-lg-10">
					<Card header="图标" id="icons">
						{['tags','phone','eye','arrows','flickr','cny','area-chart','square-o'].map(type => (<Fragment><Icon type={type} />&nbsp;</Fragment>))}
					</Card>
					<Card header="时间轴" id="timelime">
						<ETimeline />
					</Card>
					<Card header="Alert" id="alert">
						{types.map(i => <Alert type={i}>{i}</Alert>)}
					</Card>
					<Card header="Badge" id="badge">
						{types.map((a,i) => <Badge className="badge-pill" type={a}>{i}</Badge>)}
					</Card>
					<Card header="Button" id="button">
						<Button.Group size="default">
							{types.map(i => <Button icon="phone" type={i} onClick={_ => alert(i)}>{i}</Button>)}
						</Button.Group>
					</Card>
					<Card header="Card" id="card">
						<Card header="头部Header" title="Title标题" subTitle="副标题" footer={'底部Footer'} id="card">
							hello
						</Card>
					</Card> 
					<div id="tabs">
						<Tab defaultActive="1">
							{[1,2,3].map(i => <Tab.Panel tab={i+''} title={'测试'+i} key={i+''}>李四{i}</Tab.Panel>)}
						</Tab>
					</div>
				
				</div>
			
			</div>
		);
	}
}

Plugins.propTypes = {

};

export default Plugins;
